<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(document).ready(function () {
            // 1 json 定义并访问 对象 类型
            var user =
                {
                   "id" : 1 ,
                   "name" : "大柱子" ,
                   "pwd" : "123456"
                }
            $("#objectDiv").append("id :" + user.id + "<br>")
                           .append("name :" + user.name + "<br>")
                           .append("pwd:" + user.pwd + "<br>" )
            // 2 json 定义并访问数组
            var array = ["中"  , "日" , "韩" ];
            var $array = $(array) ; // 将js数组转换为jquery数组，可以使用jquery的方法
            var $select = $("#arraySelect"); // 将js元素转换为jquery元素
            var $arrayUL = $("#arrayUL");
            $array.each( function (i) {
                $select.append("<option value=' " + (i+1)+   " '> " + this + " </option>>" )
            })
            // json 定义并访问对象数组
            var userArray =
                [
                    {
                        "id" : 1 ,
                        "name" : "zhangsan" ,
                        "age" : 19
                    },
                    {
                        "id" : 2 ,
                        "name" : "lisi" ,
                        "age" : 29
                    }

                ];
            var $table = $("<table border='1'> </table>").append(
                "<tr> <td>id</td> <td>name</td> <td>age</td> </tr>"
            )
            $(userArray).each(function () {
                $table.append(
                    "<tr>" +
                        "<td> " + this.id + "</td>"  +
                        "<td>" + this.name + "</td>" +
                        "<td>" + this.age + "</td>"  +
                    "</tr>"
                )
            })

            $("#objectArrayDiv").append($table);

        })



    </script>


</head>
<body>
    <div id="objectDiv">

    </div>

    <div>
        <select name="arraySelect" id="arraySelect">

        </select>
        <ul id="arrayUL">

        </ul>
    </div>

    <div id="objectArrayDiv">

    </div>

</body>
</html>